<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE第三天 过渡效果</title>
  <style>
    .p1 {
      padding: 20px;
      border: 1px solid red;
    }
    .tran1-enter {
      opacity: 0;
    }
    .tran1-enter-active {
      transition: opacity 5s;
    }
    .tran1-enter-to {
      opacity: 1;
    }
    .tran1-leave {
      opacity: 1;
    }
    .tran1-leave-active {
      transition: opacity 5s;
    }
    .tran1-leave-to {
      opacity: 0;
    }
    .tran2-enter {
      width: 0;
    }
    .tran2-enter-active {
      transition: width 2s;
    }
    .tran2-enter-to {
      width: 100%;
    }
    .tran2-leave {
      width: 100%;
    }
    .tran2-leave-active {
      transition: width 2s;
    }
    .tran2-leave-to {
      width: 0;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
  <div id="app"> 
    <h1>过渡效果-元素切换时的动态效果</h1>
    <transition name="tran1">
      <p class="p1" v-show="isShow">hello</p>
    </transition>
    <button @click="isShow = !isShow">toggle</button>
    <hr>
    <hr>
    <hr>
    <transition name="tran2">
      <p class="p1" v-show="isShow1">hello</p>
    </transition>
    <button @click="isShow1 = !isShow1">toggle</button>
    <hr>
    <hr>
    <hr>
    <transition
      leave-active-class="animated fadeOutDown"
      enter-active-class="animated flipInX"
    >
      <p class="p1" v-show="isShow3">hello</p>
    </transition>
    <button @click="isShow3 = !isShow3">toggle</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        isShow: true,
        isShow1: true,
        isShow3: true
      },
      
    })
  </script>
</body>
</html>